<template>
	<div class="fix-all inventory-info-wrap">
		<div class="inventory-info" id="inventory_info">
			<div class="inventory-img" id="inventory_img">
				<img class="divtcvm unload" id="inventory_imgId" src="/wexin-orders/assets/images/default-inventory-img.png" data-src="http://app.menpuji.com{{inventoryInfo.inventory.pic}}" onerror="this.src='/wexin-orders/assets/images/default-inventory-img.png'">
			</div>

			<dl class="cart-dl inventory-info-dl" id="j_inventoryinfo_dl">
				<i class="iconfont icon-inventoryinfo-add" v-gesture:tap.stop.prevent="addInventory(inventoryInfo.inventory)"></i>
				<div class="md-padding text-default dt">
					<p class="text-accent p-title">{{inventoryInfo.inventory.name}}<p>
					<p class="text-color-info text-muted p-sold">月售  {{inventoryInfo.inventory.qty||0}}  {{inventoryInfo.inventory.unit.name}}<span class="r"><span class="r-price">￥{{inventoryInfo.inventory.price}}</span><span v-inventory-options-required="inventoryInfo.inventory"> 起</span></span></p>
					<p class="text-color-info text-muted p-info">{{inventoryInfo.description}}</p>
				</div>
				<div class="line-title" title="菜单列表"></div>
				<div id="item_max_height" class="content-list">
					<div>
						<dd class="item-height md-padding text-default layout-row" v-for='item in newCart.items'>
							<div class="item-l layout-flex layout-column layout-center" v-gesture:tap.stop.prevent="showInventoryGroup(item)">
								<p class="item-p-title">
									<span class="vb">#{{$index+1}}</span>
									<span class="text-accent item-title vm">￥{{item.amount}}</span><!--
									--><span v-if="item.modifiers"><span class="vm" v-for="modifier in item.modifiers.items"><span  v-for="option in modifier.options" v-if="modifier.options.length!=0" class="item-info">{{option.name}}</span></span></span>
								</p>
								<p class="text-muted text-color-info item-p-info ell">{{item.extended.description}}</p>
							</div>
							<div class="item-r layout-row layout-center">
									<!-- <i class="iconfont icon-inventory-remark" v-gesture:tap.stop.prevent="transformIsShowRemark($index)"></i> -->
									<div class="item-rr">
										  <i v-bind:class="['iconfont', item.qty>1 ? 'icon-inventory-subtract' : 'icon-inventory-delete']" v-gesture:tap.stop.prevent="subtrackInventory($index)"></i>
										<span class="inventory-count">{{item.qty}}</span>
										<i class="iconfont icon-inventory-add" v-gesture:tap.stop.prevent="increaseInventory($index)"></i>
									</div>
							<div>
						</dd>
					</div>
				</div>
			</dl>
			<button class="btn-bottom bottom-btn text-accent" v-gesture:tap.stop.prevent="confirm()">确  认</button>
		</div>


		<!-- 商品选项 -->
		<inventory-option-group v-if="inventoryOptionGroupOption.show" :cart.sync='newCart' :inventory-option-group.sync="inventoryOptionGroupOption"></inventory-option-group>
		<!-- 备注 -->
		<remark v-if="isShowRemark" :remark-msg.sync="remarkMsg" :is-show-Remark.sync="isShowRemark" ></remark>
	<div>
</template>


<style lang='sass'>
	@import '../assets/sass/global/themes.scss';
	.inventory-info-wrap{background: white;overflow-y: scroll}
	.inventory-info-wrap .inventory-info{position: absolute;top: 0;bottom: 50px;width: 100%;}
	.inventory-info-wrap .inventory-info-dl{position: absolute;bottom: 0;width: 100%;background:white;}
	.inventory-info-wrap .inventory-img{position: relative;height: 10rem;background: #E2E2E2;}
	.inventory-info-wrap .inventory-img img{width:100%;}
	.inventory-info-wrap .icon-inventoryinfo-add{font-size: 52px;color: $font-color-primary;position: absolute;right: 0.45rem;top:0;margin-top: -27px;}
	.inventory-info-wrap .icon-inventoryinfo-add:active{color: $btn-color-active}
	.inventory-info-wrap .inventory-info-dl:before{width: 45px;height: 45px;position: absolute;background: white;content: "";top: 0;right: 0.45rem;margin-top: -20px;border-radius: 9999px;margin-right: 4px;}
	.inventory-info-wrap .bottom-btn{position:fixed;bottom: 0}
	.inventory-info-wrap .bottom-btn:active{background: $btn-color-active}
	.inventory-info-dl dt,.inventory-info-dl .dt{background: white;line-height:normal;padding-top: 28px}
	.inventory-info-dl .line-title{position: reative;border-bottom: 1px solid #e3e3e3;}
	.inventory-info-dl .line-title::after{content:attr(title);font-size:12px;color: #e3e3e3;position: absolute;margin-top: -8px;background: white;padding: 0 3px;transform: translateX(-50%);margin-left: 50%;}
	.inventory-info-dl .content-list{overflow-y: scroll;}
	.inventory-info-dl dt .p-title,.inventory-info-dl .dt .p-title{}
	.inventory-info-dl dt .p-sold,.inventory-info-dl .dt .p-sold{line-height: 36px}
	.inventory-info-dl dt .p-sold .r,.inventory-info-dl .dt .p-sold .r{color: #727272}
	.inventory-info-dl dt .p-sold .r-price,.inventory-info-dl .dt .p-sold .r-price{font-size: 20px;color: $font-color-accent}
	.inventory-info-dl dt .p-sold .r span:last-child,.inventory-info-dl .dt .p-sold .r span:last-child{opacity: 0;}
	.inventory-info-dl dt .p-sold .r span.require,.inventory-info-dl .dt .p-sold .r span.require{opacity: 1;}
	.inventory-info-dl dt	.p-info,.inventory-info-dl .dt	.p-info{padding-bottom: 16px}
	.btn-bottom{width: 100%;height: 50px;background: $bg-color-primary;color: white}
	.inventory-info-dl .icon-inventory-remark{color:#727272;font-size: 0.7rem}

	button{width: 50px}
</style>

<script type="text/javascript">
	//history
	import Inventoryitem from '../business/inventoryitem';
	import Inventories from '../business/inventories';
	import Cart from '../business/cart';
	import HistoryManage from '../lib/history-manage';
	export default{
		// props:{
		// 	inventoryInfo: {
		// 		type: Object,
		// 		require: true
		// 	},
		// 	cart: {
		// 		type: Object,
		// 		require: true
		// 	},
		// 	inventoryOptionGroup: {
		// 		type: Object,
		// 		require: true
		// 	}
		// },
		data: function(){
			return {
				isShowRemark: false,
				remarkIndex:0,
				remarkMsg: "",
				inventoryOptionGroupOption: {
					show:false,
					inventory:{},
					inventoryItem:null
				},
				newCart: {},
				//props
				inventoryInfo: this.$parent.inventoryInfo,
				cart: this.$parent.order.cart,
				inventoryOptionGroup: this.$parent.inventoryOptionGroup
			}
		},
		created: function(){
			// debugger
			this.newCart = new Cart();
			this.newCart.items = this.cart.getCartDeepByInvrntortyId(this.inventoryInfo.inventory.id);
		},
		ready: function(){
			const self = this;
			// test todo
			let _imgH = document.getElementById("inventory_img").offsetHeight;
			let _infoH = document.getElementById("inventory_info").offsetHeight;
			document.getElementById('j_inventoryinfo_dl').style.minHeight = (_infoH - _imgH)+'px';
			document.getElementById('item_max_height').style.maxHeight = (window.innerHeight - 117 - 50 -80) + 'px';
			//图片加载正中间
			let imgFullLoad = function(ele){
				const _elem = ele;
				const _p = _elem.parentNode;
				const _h = _p.offsetHeight;
				const _w = _p.offsetWidth;
				const _ratio = _h / _w;
				const _imgsrc = _elem.getAttribute('data-src');
				let _imageObj = new Image();
				_imageObj.src = _imgsrc;
				_imageObj.onload = function() {
					let _imgh = this.width;
					let _imgw = this.height;
					let _imgRadio = _imgh / _imgw;
					let _marginTop = 0;
					let _paddingLeft = 0;
					let _scale = 0;
					let _widh = 0;
					let _height = 0;
					if (_imgRadio > _ratio){
						_scale = _w / _imgw;
						_widh = _w;
						_marginTop = (_imgh - _imgh * _scale)/2;
						_height = _imgh * _scale;
					} else {
						_scale = _h / _imgh;
						_height = _h;
						_paddingLeft = (_imgw - _imgw * _scale)/2;
						_widh = _imgw * _scale;
					}
					let _imgCss = 'height:'+_height+'px;width:'+_widh+'px;padding-left:'+_paddingLeft+'px;margin-top:'+_marginTop+'px;';
					// console.log(_imgCss);
					_elem.src = _imgsrc;
					// _elem.classList.remove('unload');
					_elem.style.cssText = _imgCss;
				}
			}
			imgFullLoad(document.getElementById('inventory_imgId'));

			self.inventoryOptionGroupOption.inventory = self.inventoryInfo.inventory;
			self.$watch('isShowRemark', function(){
				let _keypath = 'newCart.items[' + self.remarkIndex + '].extended.description';
				this.$set(_keypath, self.remarkMsg);
			});
		},
		computed:{
			inventoryIndex: function(){
				// if(!this.inventoryIndexthis){
				// 	this.inventoryIndexthis = 0;
				// }
				return 1;
			}
		},
		methods:{
			subtrackInventory:function(newCartIndex){
				this.newCart.decreaseInventoryInInventoryitem(newCartIndex);
			},
			increaseInventory:function(newCartIndex){
				this.newCart.increaseInventoryInInventoryitem(newCartIndex);
			},
			addInventory: function(inventory){
				const self = this;
				// debugger
				if (Inventories.isInventoryIsRequired(inventory)){
					//弹出选项卡
					self.inventoryOptionGroupOption.inventory = inventory;
					self.inventoryOptionGroupOption.show=true;
				}
				else{
					//没得必选项
					// newCart.
					self.newCart.addInventory(inventory);
				}
			},
			confirm: function(){
				// debugger
				this.cart.mergeInventoryCartByInventoryId(this.newCart, this.inventoryOptionGroupOption.inventory.id);
				this.inventoryInfo.inventory = {};
				this.inventoryInfo.show = false;
				HistoryManage.back();
				// this.$router.go({name:"inventory-list"});
			},
			transformIsShowRemark: function(index){
				this.remarkIndex = index;
				this.remarkMsg = this.newCart.items[index].extended.description;
				this.isShowRemark = !this.isShowRemark;
			},
			showInventoryGroup:function(inventoryitem){
				this.inventoryOptionGroupOption.inventory = this.inventoryInfo.inventory;
				this.inventoryOptionGroupOption.show=true;
				this.inventoryOptionGroupOption.inventoryItem = inventoryitem;
			}
		},
		components: {
			'remark': require('../components/remark'),
		 'inventory-option-group': require('./inventory-option-group')
	 },
	 route:{
		 canDeactivate(transition){
			 if(this.inventoryOptionGroupOption.show){
				 this.inventoryOptionGroupOption.show = false;
				 	 this.$router.go({name:"inventory-info"});
				 return transition.abort();
			 }else {
				 debugger
				//  this.$router.redirect({name:"inventory-list"});

				  return transition.next();
			 }
		}
	}
}
</script>
